<template>
	<div id="content">
		<div v-if="!form.template">请选择文章模板</div>
		<div v-else>
			<div style="margin:0 0;font-size:15px" v-if="form.template == '2'"><span>顶部横幅:</span>
				<wt-image-selector
					style="display:inline-block"
					:value="currentValue.head.image"
					@input="value => { currentValue.head.image = value[0] }"
					:auto-upload="true"
					:parent-id="form.id"
					:action = "action"
					:multiple="false"
				></wt-image-selector>
				<div style="color:#20a0ff;font-size:14px">请选择宽高比为5:2的图片,宽度大于700px效果最佳</div>
			</div>
			<div>作者</div>
				<el-input v-model="currentValue.author"></el-input>
			<div>文章列表</div>
			<div style="display:initial;float:right;margin:8px 0">
				<el-button @click="addSort" icon="plus" type="primary">添加新文章于列表最后</el-button>
				<el-button @click="addBack" icon="plus">添加新文章于列表顶部</el-button>
			</div>
			<el-table
				:data="currentValue.body"
				style="width: 100%">
				<el-table-column
					v-if="form.template == '1'"
					prop="image"
					min-width="50"
					label="文章封面图">
					<template scope="scope">
						<wt-image-selector
						:value="scope.row.image"
						@input="value => { scope.row.image = value[0] }"
						:auto-upload="true"
						:parent-id="form.id"
						:multiple="false"
						:action = "action"
						></wt-image-selector>
						<span style="color:#20a0ff;font-size:14px">请选择宽高比为4:3的图片,宽度大于85px效果最佳</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="title"
					label="文章标题">
					<template scope="scope">
						<el-input v-model="scope.row.title"></el-input>
						<span v-if="!scope.row.title" style="color:#ff4949">请填写文章标题</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="form.template == '1'"
					prop="desc"
					label="文章简介">
					<template scope="scope">
						<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 8}" v-model="scope.row.desc"></el-input>
						<span v-if="!scope.row.desc" style="color:#ff4949">请填写文章简介</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="url"
					label="文章链接">
					<template scope="scope">
						<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 5}" v-model="scope.row.url"></el-input>
						<span v-if="!scope.row.url" style="color:#ff4949">请填写文章链接</span>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					min-width="50">
					<template scope="scope">
						<el-button @click="remove(scope.row)" size="small" icon="delete2">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	import ElementUI from 'element-ui'
	Vue.use(ElementUI);
export default {
	name:"wt-article-content-list",
	props:{
		field: {
			type: Object,
			required: true,
		},
		form:{
			type:Object,
			default:{}
		},
		value:{
			type:[Object,String],
			default:function(){
				return {}
			}
			},
		paramsData: {
			type: Object,
			default:function(){
				return {}
			}
			},
	},
	data(){
		return{
			activeNames: [],
			currentValue: {},
			type: this.form.template,
			action: 'article/upload',
			ispush: false
		}
	},
	computed:{

	},
	watch:{

	},
	methods:{
		remove(row){
			this.$confirm('您将删除文章"'+row.title+'"，是否确定？','操作提示',{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.deleting = true;
				for(let i = 0; i<this.currentValue.body.length; i++){
					if(this.currentValue.body[i] == row){						
						var reArr = this.currentValue.body.splice(i,1);  
					}
				}
			}).catch(() => {
			})
		},
		addSort(){
			let arr;
			arr = this.currentValue.body;
			arr.push({
				desc:null,
				image:null,
				title:null,
				url:null
			})
		},
		addBack(){
			let arr;
			arr = this.currentValue.body;
			arr.unshift({
				desc:null,
				image:null,
				title:null,
				url:null
			})
			this.currentValue.body = arr;
		},

	},
	created(){
		if(typeof(this.value) == "string"){
			this.currentValue = JSON.parse(this.value)
		}else{
			this.currentValue = this.value
		}

	}
}
</script>
<style lang="less">
	#content{
		.el-table .cell {
			padding:6px;
		}
		.el-upload--picture-card{
			width:80px;
			height:80px;
			line-height:80px
		}
		.el-form-item__label{
			text-align:left;
		}
		.el-form-item{
			margin-top:10px
		}
		}
		
</style>
